<!--
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-03-04 16:09:13
 * @Description  : 迁移用户到部门
-->

<template>
  <!-- <n-card
    :size="'small'"
    style="width: 540px"
    role="dialog"
    title="迁移用户到部门"
    :bordered="false"
    aria-modal="true"
  >
    <template #header-extra>
      <SvgIcon
        icon="chacha"
        class="cursor-pointer"
        @click="handleClose"
      ></SvgIcon>
    </template>
    <n-divider class="!my-2" /> -->
  <n-form
    ref="moveUserToDepFormRef"
    :label-width="isSmall ? 100 : 120"
    label-placement="left"
    :label-align="isSmall ? 'left' : 'right'"
    :model="user"
    size="small"
    require-mark-placement="right"
    :rules="formRule"
  >
    <n-form-item label="已选用户：" path="userIds">
      <UserSelect
        :root-dep-id="rootDep?.id || '1'"
        :has-not-dep-user="false"
        :default-user-ids="user.userIds"
        @change-value="handleUserIdsChange"
        class="!w-[300px]"
      ></UserSelect>
    </n-form-item>

    <n-form-item label="目标部门" path="departmentId">
      <dep-select
        :multiple="false"
        :root-dep="rootDep"
        class="!w-[300px]"
        @changeValue="handleDepChange"
      ></dep-select>
    </n-form-item>

    <n-form-item label=" " v-permission="[PERMISSIONS.USER_EDIT]">
      <n-button type="primary" class="grent-btn w-[120px]" @click="handleSave">
        保存
      </n-button>
    </n-form-item>
  </n-form>
  <!-- </n-card> -->
</template>

<script setup lang="ts">
import type { FormInst } from 'naive-ui'
import type { UserDepMoveReq } from '@/types/userDep'
import { userMenuShow } from '@/hooks/useMenuShow'
import { PERMISSIONS } from '@/constants/permission'
import { flattenArrayByChildren } from '@/utils'
import type { IndexObj } from '@/types/commom'

const emits = defineEmits<{
  (e: 'visibleChange', value: boolean): void
  (e: 'moveUserToDep', data: UserDepMoveReq): void
}>()

const props = defineProps<{
  checkUserIds: string[]
  rootDep?: IndexObj
}>()

const handleClose = () => {
  emits('visibleChange', false)
}

const handleDepChange = (value: string | string[]) => {
  user.departmentId = value
}

const { isSmall } = userMenuShow()

const user = reactive<IndexObj>({
  departmentId: '',
  userIds: [],
  options: []
})

const initUser = () => {
  user.userIds = props.checkUserIds
  user.departmentId = ''
}

onMounted(() => {
  initUser()
})

const handleUserIdsChange = (
  value: string[] | string,
  options?: IndexObj[]
) => {
  user.userIds = value as string[]
  user.options = options
}

const formRule = {}

const moveUserToDepFormRef = ref<FormInst | null>(null)

const handleSave = () => {
  moveUserToDepFormRef.value?.validate((error: any) => {
    if (error) {
      return
    }

    // 将options数组拍平
    if (!user.options.length) {
      emits('moveUserToDep', {
        departmentId: user.departmentId,
        // 根据userId获取到user-dep-id
        userIds: props.checkUserIds
      })
      return
    }

    const flatOptions = flattenArrayByChildren(user.options)

    // 找出userId对应的user-dep-id
    const finaUserIds = user.userIds

    // flatOptions
    //   .filter((item) => {
    //     return finaUserIds.includes(item.id)
    //   })
    //   .map((item) => {
    //     return item.Departments
    //   })

    emits('moveUserToDep', {
      departmentId: user.departmentId,
      // 根据userId获取到user-dep-id
      userIds: finaUserIds
    })
  })
}
</script>

<style scoped lang="scss"></style>
